import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Card, CardContent } from './ui/card';
import { 
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from './ui/dropdown-menu';
import { 
  Database, 
  Server, 
  ChevronDown, 
  Wifi, 
  WifiOff,
  Settings,
  Loader2
} from 'lucide-react';
import { useDataSource, DataSource } from '../lib/data/context';
import { useI18n } from '../lib/i18n/context';
import { toast } from 'sonner@2.0.3';

export function DataSourceSwitcher() {
  const { t } = useI18n();
  const { dataSource, setDataSource, isLoading } = useDataSource();

  const handleSourceChange = async (newSource: DataSource) => {
    if (newSource === dataSource) return;
    
    try {
      setDataSource(newSource);
      const sourceLabel = newSource === 'mock' ? 'Mock Data' : 'Backend API';
      toast.success(`Switched to ${sourceLabel}`);
    } catch (error) {
      console.error('Failed to switch data source:', error);
      toast.error('Failed to switch data source');
    }
  };

  const getSourceInfo = (source: DataSource) => {
    switch (source) {
      case 'mock':
        return {
          label: 'Mock Data',
          description: 'Using local mock data',
          icon: Database,
          color: 'bg-blue-500',
          status: 'Local'
        };
      case 'backend':
        return {
          label: 'Supabase Backend',
          description: 'Connected to Supabase edge functions',
          icon: Server,
          color: 'bg-green-500',
          status: 'Connected'
        };
    }
  };

  const currentSource = getSourceInfo(dataSource);
  const CurrentIcon = currentSource.icon;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="flex items-center space-x-2 min-w-[160px]">
          {isLoading ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <CurrentIcon className="h-4 w-4" />
          )}
          <span className="hidden sm:block">{currentSource.label}</span>
          <Badge 
            variant={dataSource === 'backend' ? 'default' : 'secondary'}
            className="text-xs"
          >
            {currentSource.status}
          </Badge>
          <ChevronDown className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      
      <DropdownMenuContent className="w-80" align="end">
        <DropdownMenuLabel className="flex items-center space-x-2">
          <Settings className="h-4 w-4" />
          <span>Data Source Configuration</span>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        
        {/* Mock Data Option */}
        <DropdownMenuItem 
          onClick={() => handleSourceChange('mock')}
          className="p-3 cursor-pointer"
        >
          <div className="flex items-start space-x-3 w-full">
            <div className={`w-2 h-2 rounded-full mt-2 ${dataSource === 'mock' ? 'bg-blue-500' : 'bg-gray-300'}`} />
            <div className="flex-1">
              <div className="flex items-center space-x-2">
                <Database className="h-4 w-4" />
                <span className="font-medium">Mock Data</span>
                {dataSource === 'mock' && (
                  <Badge variant="default" className="text-xs">Active</Badge>
                )}
              </div>
              <p className="text-sm text-muted-foreground mt-1">
                Use local mock data for development and testing
              </p>
              <div className="flex items-center space-x-2 mt-2">
                <WifiOff className="h-3 w-3 text-muted-foreground" />
                <span className="text-xs text-muted-foreground">No network required</span>
              </div>
            </div>
          </div>
        </DropdownMenuItem>

        {/* Backend API Option */}
        <DropdownMenuItem 
          onClick={() => handleSourceChange('backend')}
          className="p-3 cursor-pointer"
        >
          <div className="flex items-start space-x-3 w-full">
            <div className={`w-2 h-2 rounded-full mt-2 ${dataSource === 'backend' ? 'bg-green-500' : 'bg-gray-300'}`} />
            <div className="flex-1">
              <div className="flex items-center space-x-2">
                <Server className="h-4 w-4" />
                <span className="font-medium">Supabase Backend</span>
                {dataSource === 'backend' && (
                  <Badge variant="default" className="text-xs">Active</Badge>
                )}
              </div>
              <p className="text-sm text-muted-foreground mt-1">
                Connect to Supabase edge functions backend
              </p>
              <div className="flex items-center space-x-2 mt-2">
                <Wifi className="h-3 w-3 text-muted-foreground" />
                <span className="text-xs text-muted-foreground">Real-time data</span>
              </div>
            </div>
          </div>
        </DropdownMenuItem>

        <DropdownMenuSeparator />
        
        {/* Current Status */}
        <div className="p-3">
          <Card>
            <CardContent className="p-3">
              <div className="flex items-center space-x-2">
                <CurrentIcon className="h-4 w-4" />
                <div className="flex-1">
                  <p className="text-sm font-medium">{currentSource.label}</p>
                  <p className="text-xs text-muted-foreground">{currentSource.description}</p>
                </div>
                <Badge 
                  variant={dataSource === 'backend' ? 'default' : 'secondary'}
                  className="text-xs"
                >
                  {isLoading ? 'Loading...' : currentSource.status}
                </Badge>
              </div>
            </CardContent>
          </Card>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}